html,
body {
  margin: 0;
  color: $text;
  letter-spacing: 0.5px;
  // font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Microsoft YaHei,Source Han Sans SC,Noto Sans CJK SC,WenQuanYi Micro Hei,sans-serif;
  font-size: $font-size-base;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

body {
  padding: 5rem 0 0 0;
}

body.mobile {
  overflow-x: hidden;
  padding: 0;
  background: $white;
}

// @font-face {
//   font-family: 'Futura';
//   src: url('https://static.jkchao.cn/_nuxt/fonts/Futura.ttc');
// }

code,
pre {
  font-family: "Roboto Mono", Monaco, courier, monospace;
  -webkit-font-smoothing: initial;
  -moz-osx-font-smoothing: initial;
}

*, *:hover {
  @include transition(background-color .25s linear,
                      color .10s linear,
                      margin .25s linear,
                      opacity .25s linear,
                      filter .25s linear,
                      visibility .25s linear,
                      transform .25s linear,
                      border-color .25s linear);
}

.container {
  width: $container-width;
  margin: 0 auto;
}

// line
.line {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  color: $border-color;
  background: currentColor;
}



// 清除浮动
.clearfix {
  &:after {
    content: '';
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

#share {
  
    &.article-share {
  
      > .share-box {
        opacity: .6;
  
        &:hover {
          opacity: 1;
        }
  
        > .share-link {
          width: calc((100% - (.445em * 11)) / 12);
          height: 2.2em;
          line-height: 2.3em;
          background-color: #eee;
          margin-right: .445em;
  
          > .iconfont {
            font-size: 1.3em;
          }
  
          &:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }

.markdown-content {
  a {
    font-weight: bold;
    margin: 0 .1rem;

    &.image-link {
      margin: 0;
    }

    &:hover {
      text-decoration: underline;
    }
  }

  .image-package {
    text-align: center;
    width: 92%;
    margin: 0 auto .5rem auto;

    .img-caption {
      display: none;
    }
  }

  img {
    max-width: 100%;
    margin: .3rem auto;
    display: block;
    text-align: center;
    border-radius: $radius;
    transition: all .25s;
    opacity: .9;
    cursor: default !important;

    &.img-pop {
      cursor: zoom-in;
    }
  }

  p {
    line-height: 1.4rem;
    margin-bottom: .3rem;

    &.text-center {
      text-align: center;
    }

    &.text-right {
      text-align: right;
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: .3rem 0;
    padding-left: 0;
    line-height: 1.4rem;
    font-weight: 700;
    text-indent: 0;

    &:target{
      padding-top: 4.5rem;
    }
  }

  hr {
    height: 0.1rem;
    background: #e1e4e8;
    border: 0;
  }

  blockquote {

    padding: 0 1rem;
    margin-bottom: .3rem;
    color: #6a737d;
    border-left: 0.25rem solid #dfe2e5;

    p {
      text-indent: 0rem;

      &:first-child {
        margin-top: 0;
      }
      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  ul {
    list-style-type: square;
  }

  ul,
  ol {
    padding-left: 2rem;
    margin-bottom: .3rem;

    >li {
      line-height: 1.4rem;
      padding: .5rem;
      list-style-type: disc;


      >p {
        text-indent: 0;
      }

      >ul {

        li {
          list-style-type: circle;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  ul {
    list-style: disc;
  }
}

.hr {
  display: inline-block;
  width: 2px;
  height: 2px;
  background: #AAB2BD;
  margin: 4px .6rem;
}

a {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

::-webkit-input-placeholder {
  /* WebKit browsers */
  color: $disabled;
  font-size: 1rem;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: $disabled;
  font-size: 1rem;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: $disabled;
  font-size: 1rem;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: $disabled;
  font-size: 1rem;
}


::-webkit-scrollbar {
  width: .5rem;
  height: .5rem;
  background: hsla(0, 0%, 100%, 0.6);
}

::-webkit-scrollbar-track {
  border-radius: 0;
}

::-webkit-scrollbar-thumb {
  border-radius: 0;
  background-color: rgba(95,95,95,.4);
  transition: all .2s;
  border-radius: .5rem;

  &:hover {
    background-color: rgba(95,95,95, .7);
  }
}
